<template>
    <div class='login_container'>
        <div class='login_box'>
            <!--      头像区域      -->
            <div class='avatar_box'>
                <img src="../assets/logo.png">
            </div>
            <!--    登录表单    -->
            <el-form ref="ruleFormRef" class="login_form" :model="login_Form" :rules="loginRules">
                <!--    用户名        -->
                <el-form-item prop="username">
                    <el-input  v-model="login_Form.username" prefix-icon="iconfont icon-Serviceusers"></el-input>
                </el-form-item>
                <!--    密码        -->
                <el-form-item prop="password">
                    <el-input  v-model="login_Form.password" type="password" prefix-icon="iconfont icon-password"></el-input>
                </el-form-item>
                <!--      按键          -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="rePlay">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
 
<script>
    export default {
    name: 'login',
        data:function () {
         return{
             //表单数据绑定
             login_Form:{
                 username:"admin",
                 password:"123456"
             },
             //表单验证规则
             loginRules:{
                 username:[
                     { required: true, message: '请输入用户名', trigger: 'blur' },
                     { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                 ],
                 password:[
                     { required: true, message: '请输入密码', trigger: 'blur' },
                     { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
                 ]
             }
         }
     },
    methods:{
        rePlay(){
            this.$refs.ruleFormRef.resetFields()
        },
        login(){
            //预验证的参数是一个回调函数，参数的形参的第一个参数为一个布尔值，true为预验证正确，反之错误
            this.$refs.ruleFormRef.validate(async vaild=>{
               if(!vaild)return;
               var {data}= await this.$http.post('login',this.login_Form)
                if (data.meta.status!==200)return this.$message.error('登录失败！')
                this.$message.success('登录成功~')
                //1.登录成功后，再保存到sessionStorage(页面打开时生效而内存是永久生效)中,因为以后的请求要token验证
                //2.利用编程式路由调换到/home路由
                window.sessionStorage.setItem('token',data.data.token)
                this.$router.push('/home')
            })
        }
    }
    }
</script>

<style lang='less' scoped>
.login_container{
    background:#2b4b6b;
    height:100%;
}

.login_box{
    width:450px;
    height:300px;
    background:#fff;
    border-radius:3px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position:absolute;
        transform:translate(-50%,-50%);
        background-color: #fff;
        left:50%;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #eee;
        }
    }
    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        .btns{
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>
